﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Classic.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Karty pacjentów</h2>
    <fieldset class="form">
        <h3>
            Wyszukiwanie pacjenta:
        </h3>
        <div>
            <label for="patient_search_value">
                Kryterium:
            </label>
            <input type="text" id="patient_search_value" />
            <select id="patient_search_field">
                <option value="Personal.Surname">Nazwisko</option>
                <option value="Personal.Pesel">Pesel</option>
            </select>
            <input type="button" id="patient_search_button" value="Szukaj" onclick="javascript:GetPatientSearchResult();" />
        </div>
        <div>
            <table class="grid" id="patient_search_result">
            </table>
        </div>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">

        function UpdatePatientResultTableAnimated(data) {
            var resultTable = $("table#patient_search_result");
            resultTable.fadeOut("slow", function () {
                UpdatePatientResultTable(data);
                resultTable.fadeIn("slow");
            });
        }

        function UpdatePatientResultTable(data) {
            var resultTable = $("table#patient_search_result");
            resultTable.empty();
            resultTable.append($("<thead>").html("<tr><th>Imię i nazwisko</th><th>Pesel</th><th>Adres</th><th>Akcja</th></tr>"));
            var result = $("<tbody>");
            var hasElements = false;
            $.each(data, function (index, d) {
                hasElements = true;
                var line = $("<tr>").attr("class", index % 2 == 0 ? "gridrow" : "gridrow_alternate");
                var element = $("<td>").attr("class", "center");
                var patientDetailAddr = "/Entry/PatientCard/" + d.Id;
                var patientLink = $("<a>").html("Karta").attr("href", patientDetailAddr);
                line.append(element.clone().html(d.Name));
                line.append(element.clone().html(d.Pesel));
                line.append(element.clone().html(d.Address));
                line.append(element.clone().html(patientLink));
                result.append(line);
            });
            if (hasElements == false) {
                result.append("<tr class=\"gridrow\"><td colspan=\"4\" class=\"center\">Nie znaleziono pacjentów</td></tr>");
            }
            resultTable.append(result);
        }

        function GetPatientSearchResult() {
            var url = "/Patient/JsonSearch/";
            var json = {
                field: $("select#patient_search_field").val(),
                value: $("input#patient_search_value").val()
            };
            $.ajax({
                url: url,
                type: "POST",
                success: UpdatePatientResultTableAnimated,
                data: json
            });
        }

    </script>    
</asp:Content>
